<template>
  <form class="submitOrder ">
    <headTop/>
    <div class="product">
      <div class="kind">
        <div>产品图片</div>
        <div>描述</div>
        <div>单价（元）</div>
        <div>数量</div>
        <div>单位</div>
        <div>小计（元）</div>
      </div>
      <div class="productInfo" v-for="(item,index) in productData" :key="index" >
        <div class="productPhoto"><img :src="myImage(item.imageUrl)" alt="无法加载"></div>
        <div class="describe">
          <p>描述：</p>
          <p>{{item.productName}}</p>
          <p>{{item.productDescribe}}</p>
        </div>
        <div><p>{{item.productPrice}}</p></div>
        <div><p>{{item.productNum}}</p></div>
        <div>{{item.height}}/套</div>
        <div>{{item.payMoney}}</div>
      </div>
      <div><span  class="totalPrice">合计：{{totalPay}}</span><span class="bankBalance">账户余额：{{bankbankbankBalance}}</span></div>
    </div>
    <div class="product">
      <div class="address">
          <p>姓名：{{address.personName}}</p>
          <p>电话：{{address.personPhone}}</p>
          <p>地址：{{address.provinceName}}{{address.cityName}}{{address.countyName}}</p>
          <p>详细地址：{{address.addressInfo}}</p>
      </div>
      <div class="kind">优惠信息</div>
      <div v-if="discounts == null">
        <p>无优惠</p>
      </div>
      <div v-else class="discountsProduct" v-for="(item,index) in discounts" :key="index" >
        <div><img :src="myImage(item.imageUrl)" alt="无法加载"></div>
        <div class="describe">
          <p>描述：</p>
          <p>{{item.productName}}</p>
          <p>{{item.productDescribe}}</p>
        </div>
        <div>
          <p>单价：</p>
          <p>{{item.productPrice}}</p>
        </div>
        <div>数量：1</div>
        <div>
          <p>规格：</p>
          <p>{{item.height}}/套</p>
        </div>
        <div>{{item.payMoney}}</div>
      </div>

      <div class="submit">
        <el-button type="text" @click="dialogVisible = true">
          <el-button type="primary">确认提交</el-button>
        </el-button>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <p>确认付款</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false;open('订单已保存，您可以到订单表查询！', 'warning');this.$router.push({ path: '/home' })">取 消</el-button>
      </span>
    </el-dialog>
  </form>
</template>
<script>
// @ is an alias to /src
import headTop from '@/components/headTop.vue'

export default {
  name: 'submitOrder',
  components: {
    headTop
  },
  data () {
    return {
      dealerId: '',
      discounts: [],
      bankBalance: 0,
      totalPay: 0,
      dialogVisible: false,
      productData: [],
      address: ''
    }
  },
  created: function () {
    this.getData()
  },
  methods: {
    open (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    change () { //  返回主页
      this.$route.push({ path: '/CreateOrder' })
    },
    handleClose (done) { //  模态框
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    getData: function () { //  上个路由获取订单信息
      this.totalPay = this.$route.query.totalPay
      this.discounts = this.$route.query.discounts
      this.bankBalance = this.$route.query.bankBalance
      this.address = this.$route.query.address
      this.dealerId = this.$route.query.dealerId
      console.log('discounts')
      console.log(this.discounts)
      this.productData = this.$route.query.productData
    },
    submit (id) { //  订单生成路由
      for (let i = 0; i < this.productData.length; i++) {
        this.productData[i].addressId = this.address.addressId
        this.productData[i].dealerId = this.dealerId
        this.productData[i].totalPay = this.totalPay
        this.productData[i].gift = ''
      }
      let temp
      if (this.discounts) {
        for (let i = 0; i < this.discounts.length; i++) {
          this.discounts[i].productNum = 1
          this.discounts[i].addressId = this.address.addressId
          this.discounts[i].dealerId = this.dealerId
          this.discounts[i].payMoney = this.discounts[i].productPrice
          this.discounts[i].totalPay = this.totalPay
          this.discounts[i].gift = '赠品'
        }
        temp = [...this.productData, ...this.discounts]
      } else {
        temp = this.productData
      }
      console.log('temp')
      console.log(temp)
      this.$axios.post('order/orderConfirm', temp) //  提交订单
        .then((response) => {
          if (response.data.code === 200) {
            this.open('提交成功！请等待业务员审核。即将返回主页。。。', 'success')
            this.$router.push({ path: '/home' })
          }
        })
        .catch((error) => {
          this.open('购买失败，数据错误\n订单已保存，您可以到订单表查询！', 'warning')
          // this.open('订单已保存，您可以到订单表查询！', 'warning')
          this.$router.push({ path: '/home' })
          console.log(error)
        })
    }
  }
}
</script>
<style lang="less">
@import '../../assets/style/mixin';
.discounts{
  border-bottom: 1px gray solid;
  margin-bottom: 30px;
}
.radio{
  padding: 10px 0;
  width: 100%;
  height: 100px;
  text-align: center;
}
.address{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  margin-right: 10px;
  width: 15%;
  display: inline-block;
  padding: 10px 15px;
}
.submit{
  float: right;
  margin: 0 10px;
}
.bankbankbankBalance{
  float: right;
}
.num{
  width: 50px;
}
*{
  font-size: 14px;
}
.headTitle{
  font-size: 18px;
}
.productPhoto{
  width: 100%;
  height: 100px;
}
.productPhoto img{
  height: 100%;
}
.kind{
  /*border-bottom: 1px gray solid;*/
  margin:  0 0 20px;
  padding: 0 0 20px;
}
.productInfo{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  margin: 10px 0;
  background: white;
  border: 5px white solid;
}
.kind,.productInfo{
  /*overflow: hidden;*/
  margin: 10px 0;
}
.kind>div,.productInfo>div{
  display: inline-block;
  width: 12%;
  /*float: left;*/
  text-align: center;
  vertical-align: middle;
}
.kind>div:nth-of-type(n+2){
  border-left: 1px lightgray solid;
}
.kind>div:nth-of-type(4),.productInfo>div:nth-of-type(4){
  width: 10%;
}
.kind>div:nth-of-type(2),.productInfo>div:nth-of-type(2){
  width: 20%;
}
.kind>div:nth-of-type(1),.productInfo>div:nth-of-type(1){
  width: 20%;
}
.product{
  padding: 10px 0;
}
</style>
